<template>
    <div style="width: 100%;">
        <el-header>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><el-icon><House /></el-icon></el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/browse' }">Browse Cell line</el-breadcrumb-item>
                <el-breadcrumb-item>Detail</el-breadcrumb-item>
                <el-breadcrumb-item>Cell line: {{ route.params.Cellline }}</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>
        <div class="detail-container">
            <div class="margin-container">
                <el-descriptions 
                    :column="1"
                    label-width="240px"
                    width="80%"
                    border
                    >
                    <template #title>
                        <h1>ecDNA Details: {{ route.params.Cellline }}</h1>
                    </template>
                    <template #extra>
                        <el-button
                            v-if="result.inEcDNADatabase"
                            style="margin: 20px; background-color: #337ab7; border-color: #2e6da4; color: white;" 
                            @click="checkEcDNAData"
                        > Check Data in EcDNA Search
                        </el-button>
                    </template>
                    <el-descriptions-item label="MajorTumorType:">{{result.MajorTumorType}}</el-descriptions-item>
                    <el-descriptions-item label="OncotreeLineage:">{{result.OncotreeLineage}}</el-descriptions-item>
                    <el-descriptions-item label="OncotreePrimaryDisease:">{{result.OncotreePrimaryDisease}}</el-descriptions-item>
                    <el-descriptions-item label="Group:">{{result.Group}}</el-descriptions-item>
                    <el-descriptions-item label="FISH:">{{result.FISH}}</el-descriptions-item>
                    <el-descriptions-item label="DAPI:">{{result.DAPI}}</el-descriptions-item>
                    <el-descriptions-item label="Literature source:" v-if="result.url">
                        <div class="urls">
                            <div v-for="url in urls" :key="url">
                                <a :href="url" target="_blank">{{ url }}</a>
                            </div>
                        </div>

                    </el-descriptions-item>
                    <el-descriptions-item label="Ref:" v-if="result.ref">
                        <div class="urls">
                            <div v-for="ref in refs" :key="ref">
                                <div>{{ ref.trim() }}</div>
                            </div>
                        </div>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup name="BrowseDetail">
    import { onBeforeMount, ref } from 'vue';
    import { useRoute, useRouter } from 'vue-router';
    import { get, post } from '../../axios/api';

    let result:any = ref({})
    const route = useRoute()
    const router = useRouter()
    let urls:any = ref([])
    let refs:any = ref('')

    async function getDetail() {
        let res:any = await get('get_browse_details/', { uuid: route.params.uuid })
        if (res && res.success) {
            result.value = res.data
            reorderReferencesAndUrls(res.data.ref)
        }
    }

    function checkEcDNAData() {
        router.push({
            name:'search',
            params: {
                OncotreeLineage: 'none',
                Type: 'none',
                Cellline: route.params.Cellline
            }
        })
    }

    function reorderReferencesAndUrls(input:any,) {
        const regex = /\b(\d{4})\s+[^,]+/g;
        let references = [];
        let match;
        const urlList = result.value.url.split(',').map((url:string) => url.trim()); // 将 URL 转换为数组并去掉多余空格
        console.log(urlList.length)
        // 提取所有符合条件的引用部分
        while ((match = regex.exec(input)) !== null) {
            references.push(match[0]); // 保存引用
        }
        console.log(references.length)
        // 如果引用和 URL 数量不匹配，直接返回错误提示
        if (references.length !== urlList.length) {
            throw new Error("引用和 URL 数量不匹配！");
        }

        // 将引用和 URL 组成对象数组
        const refUrlPairs = references.map((ref, index) => ({
            ref,
            url: urlList[index],
        }));

        // 对引用部分按年份降序排序
        refUrlPairs.sort((a:any, b:any) => {
            const yearA = parseInt(a.ref.match(/\b(\d{4})\b/)[0]);
            const yearB = parseInt(b.ref.match(/\b(\d{4})\b/)[0]);
            return yearB - yearA;
        });

        // 提取排序后的 URL 数组
        urls.value = refUrlPairs.map(item => item.url);

        // 构建排序后的引用和 URL 格式化字符串
        refs.value = refUrlPairs.map(item => item.ref);
    }

    onBeforeMount(() => {
        getDetail()
    })
</script>

<style scoped>
    .detail-container {
        width: 100%;
        display: flex;
        padding: 4px;
        border-radius: 4px;
        background-color: white;
    }

    .margin-container {
        width: 100%;
        padding: 20px 4%;
    }

    .urls {
        display: block
    }
</style>
